import React from 'react';
import G6 from '@antv/g6';
import {
    Rect,
    Text,
    Circle,
    Image,
    Group,
    createNodeFromReact,
} from 'g6-react-node';
import { G6MiniDemo } from './demo.tsx';

const Tag = ({ text, color }) => (
    <Rect
        style={{
            fill: color,
            padding: [5, 10],
            width: 'auto',
            radius: [4],
            margin: [0, 8],
        }}
    >
        <Text style={{ fill: '#fff' }}>{text}</Text>
    </Rect>
);

const Card = () => {
    return (
        <Group>
            <Rect
                style={{
                    width: 'auto',
                    height: 'auto',
                    fill: '#fff',
                    stroke: '#ddd',
                    shadowColor: '#eee',
                    shadowBlur: 30,
                    radius: [4],
                    justifyContent: 'flex-end',
                    padding: [0, 10],
                    flexDirection: 'row',
                    next : "inline"
                }}
                draggable
            >
                <Image
                    style={{
                        img:
                            'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
                        width: 100,
                        height: 100,
                        margin: [15, 16],
                        next : "inline",
                        alignContent: 'auto'
                    }}
                />
                <Rect style={{ width: 'auto', flexDirection: 'column',   padding: [15, 16] }}>
                <Tag color="#66ccff" text="100  QPS" />
                <Tag color="#66ccff" text="20 ms" />
                <Tag color="#66ccff" text="0 %" />
                </Rect>
            </Rect>
        </Group>
    );
};

G6.registerNode('test', createNodeFromReact(Card));

export default () => <G6MiniDemo nodeType="test" count={1} height={300} />;